<script setup>
import {useSysUserInfo, useSysUserMutations} from "@/composables/sys/user.js";
import OrganizationTreeSelect from "@/components/organization-tree-select/index.vue";
import RoleSelect from "@/components/role-select/index.vue";
import {useMessage} from "naive-ui";

const emits = defineEmits(["close"])
const formRef = ref(null)
const sysUserMutations = useSysUserMutations()
const message = useMessage()

const props = defineProps({
  show: {
    type: Boolean,
    required: false
  },
  id: {
    type: String
  }
})

const isEdit = computed(() => !!props.id)
// 加载详情
const idRef = computed(() => props.id)
const {data, isLoading} = useSysUserInfo(idRef)

const defaultFormData = {
  id: null,
  username: '',
  nickname: '',
  password: '',
  organizationCode: null,
  roleIds: []
}

const formData = ref({...defaultFormData})

const formRules = {
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'}
  ],
  nickname: [
    {required: true, message: '请输入昵称', trigger: 'blur'}
  ],
  organizationCode: [
    {required: true, message: '请选择机构', trigger: 'change'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'}
  ],
  roleIds: [
    {required: true, message: '请选择角色', trigger: 'change',  type: 'array', min: 1}
  ]
}

const close = () => {
  emits('close')
  formReset()
}

// 重置表单
const formReset = () => {
  formData.value = {...defaultFormData}
}

// 表单提交
const formSubmit = () => {
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      if (isEdit.value) {
        const { code} = await sysUserMutations.update.mutateAsync(formData.value)
        if (code === 1) {
          message.success('更新成功')
          close()
        }
      } else {
        formData.value.id = null
        const {code} = await sysUserMutations.create.mutateAsync(formData.value)
        if (code === 1) {
          message.success('操作成功')
          close()
        }
      }
    }
  })
}

watchEffect(() => {
  if (props.id && data.value && !isLoading.value) {
    formData.value = { ...data.value.data }
  }
})
</script>

<template>
  <n-drawer
      :show="show"
      :loading="isLoading"
      :default-width="600"
      :min-width="400"
      resizable
      @esc="close"
  >
    <n-drawer-content>
      <template #header>
        {{ isEdit ? '编辑用户' : '新增用户' }}
      </template>
      <n-form ref="formRef" :model="formData" :rules="formRules">
        <n-form-item label="用户名" path="username">
          <n-input v-model:value="formData.username" placeholder="请输入用户名"/>
        </n-form-item>
        <n-form-item label="昵称" path="nickname">
          <n-input v-model:value="formData.nickname" placeholder="请输入昵称"/>
        </n-form-item>
        <n-form-item label="机构" path="organizationCode">
          <organization-tree-select v-model:value="formData.organizationCode" top-disabled/>
        </n-form-item>
        <n-form-item label="角色" path="roleIds">
          <role-select v-model:value="formData.roleIds" multiple/>
        </n-form-item>
        <n-form-item label="密码" path="password" v-if="!isEdit">
          <n-input v-model:value="formData.password" placeholder="请输入密码"/>
        </n-form-item>
      </n-form>
      <template #footer>
        <n-space>
          <n-button size="small" @click="close">关闭</n-button>
          <n-button size="small" type="primary" @click="formSubmit">确定</n-button>
        </n-space>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<style scoped>

</style>